<template>
<div class="home" ref="gun">
  <div class="top_div">
    <div class="h10"></div>
    <div class="flex_ac">
      <img class="logo" src="~@/assets/img/logo.png" alt="">
      <div class="mra">
        <!-- <div class="logo_title">一码投成武</div>
        <div class="logo_desc">山东成武振兴乡村经济</div> -->
      </div>
      <a href="tel:400-962-5108">
        <div class="zs_div flex_ac">
            <img src="~@/assets/img/home/zsrx.png" alt="">
            <div class="zs_name">招商热线</div>
        </div>
      </a>
    </div>
    <div class="top_search flex_ac" @click="$router.push('search')">
      <img src="~@/assets/img/home/search.png" alt="">
      <div class="search_text">找产业链/找招商项目</div>
    </div>
    <swiper :options="swiperOptions" class="swiper-container">
      <swiper-slide class="swiper-slide" v-for="(i, k) in gg" :key="k">
        <video
          class="video"
          :src="i.url"
          controls
          width="100%"
          :poster="i.img"
        ></video>
        <!-- <img
          width="100%" 
          height="auto"
          class="swiper_img" 
          :src="i.img"
        /> -->
      </swiper-slide>
    </swiper>
  </div>

  <div class="menu_div flex_sb flex_w">
    <div class="menu_item" v-for="(item, index) in menuList" :key="index" @click="toPage(item.url)">
      <img :src="item.img" alt="">
      <div class="menu_item_text">{{ item.name }}</div>
    </div>
  </div>

  <div class="newsList flex_ac">
		<img class="left_img" src="~@/assets/img/home/zsdt.png" />
		<div class="line"></div>
		<div class="newsC" v-if="newsList.length">
			<div class="news_item flex_ac" @click="toNewsDetail(newsList[0].id)">
				<div class="news_i_title">{{ newsList[0].title }}</div>
			</div>
			<div class="h8"></div>
			<div class="news_item flex_ac" @click="toNewsDetail(newsList[1].id)">
				<div class="news_i_title">{{ newsList[1].title }}</div>
			</div>
		</div>
    <div class="zsdt_more" @click="$router.push('newsList')"><img class="mla" width="6px" height="12px" src="~@/assets/img/right.png" alt=""></div>
	</div>

  <div class="box_div">
    <div class="flex_ac flex_sb mb15">
      <div class="shu"></div>
      <div class="box_title">产业链<span>（共计9条）</span></div>
      <div class="box_more" @click="$router.push('chainList')">更多</div>
      <img class="ml4" width="6px" height="12px" src="~@/assets/img/right.png" alt="">
    </div>
    <div class="flex_w flex_sb">
      <div class="chain_item" v-for="i,k in chainList.slice(0,8)" :key="k" @click="toChain(i.id)">
        <img :src="i.img" alt="">
        <div class="text_line chain_name">{{ i.chain_name }}</div>
      </div>
    </div>
  </div>

  <!-- <div class="box_div">
    <div class="flex_ac flex_sb mb15">
      <div class="shu"></div>
      <div class="box_title">乡贤<span>（{{xxTotal}}）</span></div>
      <div class="box_more" @click="$router.push('xiangxian')">更多</div>
      <img class="ml4" width="6px" height="12px" src="~@/assets/img/right.png" alt="">
    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item class="flex_sb" v-for="i,k in 3" :key="k">
        <div class="box_item" v-for="i1,k1 in xxList.slice(k*3,(k+1)*3)" @click="toXxDetail(i1.id)">
          <div class="box_img">
            <img :src="i1.imgs" alt="">
          </div>
          <div class="box_name">{{ i1.name }}</div>
          <div class="box_desc">{{ i1.company_infos[0].career }}</div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div> -->
  <div class="box_div">
    <div class="flex_ac flex_sb mb15">
      <div class="shu"></div>
      <div class="box_title">龙头企业<span>（{{comTotal}}）</span></div>
      <div class="box_more" @click="$router.push('long')">更多</div>
      <img class="ml4" width="6px" height="12px" src="~@/assets/img/right.png" alt="">
    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item class="flex_sb" v-for="i,k in 3" :key="k">
        <div class="box_item" v-for="i1,k1 in comList.slice(k*3,(k+1)*3)" @click="toComDetail(i1.identification)">
          <div class="box_img">
            <img  v-if="i1.logo.indexOf('http') !== -1" :src="i1.logo" alt="">
            <img  v-else src="../assets/img/companyLogo.png" alt="">
            <div class="box_add text_line">{{ i1.city_name.join('') }}</div>
          </div>
          <div class="box_name">{{ i1.company_name }}</div>
          <!-- <div class="box_desc">{{ i1.company_infos[0].career }}</div> -->
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>

  <div class="box_div1" ref="list_div" style="background: #f4f4f4;">
    <div class="box_type flex_ac">
      <div v-for="i,k in typeList" :key="k" class="type_item" :class="type_id==i.id?'type_item_a':''" @click="changeType(i.id)">
        <div>{{ i.name }}</div>
      </div>
      <div class="box_more mla" @click="toList">更多</div>
      <img class="mr5 ml4" width="6px" height="12px" src="~@/assets/img/right.png" alt="">
    </div>
    <div v-show="type_id==2" class="new_type_div">
			<div style="display: inline-block;">
				<div class='news_type_item' :class="type_id1==i.id?'news_type_active':''" v-for="i,k in typeList1" :key="k" @click="type_id1 = i.id">
					{{i.name}}
				</div>
			</div>
		</div> 
    <van-list
      v-model="isLoad"
      :finished="isfinish"
      finished-text="没有更多了"
      @load="getMore"
    >
      <xsList :list="list" :type_id="type_id1=='xs'?1:type_id1=='xs1'?2:type_id1=='xs3'?4:3"  v-if="type_id==2" />
      <waterfall
        :col="2"
        :data="list"
        :lazy-distance="1000"
        :gutterWidth="0"
        v-else
      >
        <template v-if="type_id==1">
          <div class="item_div" v-for="(item, index) in list" :key="index" @click="toPark(item.id)">
            <div class="item_img_div">
              <img class="item_img" v-if="item.thumb" :src="item.thumb" alt="加载错误" />
              <img class="item_img" v-else src="../assets/img/park.png" />
            </div>
            <div class="item_title">{{ item.park_name }}</div>
            <div class="item_desc text_line">
              {{ item.desc }}
            </div>
          </div>
        </template>
         <!-- <template v-if="type_id==2">
          <div class="item_div" v-for="(i, k) in list" :key="k" @click="toPro(i.id)">
            <div class="item_img_div">
              <img class="item_img" v-if="!i.isErr&&i.imgs" @error="i.isErr=true;$forceUpdate()" :src="i.imgs.split(',')[0]" alt="加载错误" />
              <img class="item_img" v-else src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/zhanwei_zs.png" />
            </div>
            <div class="item_title">{{ i.name }}</div>
            <div class="item_desc flex">
              <img style="position: relative;top:2px" width="11px" height="11px" class="mr5" src="~@/assets/img/project/add.png" alt="">
              <div class="text_line2">
                {{ i.address }}
              </div>
            </div>
            <div class="item_desc flex_sb flex_ac">
              <div class="flex_ac">
                <img width="11px" height="11px" class="mr5" src="~@/assets/img/project/time.png" alt="">
                <div>{{i?.create_time.split(' ')[0]}}</div>
              </div>
              <div class="flex_ac">
                <img width="11px" height="11px" class="mr5" src="~@/assets/img/project/see.png" alt="">
                <div>{{i.read_num}}</div>
              </div>
            </div>
          </div>
        </template> -->
        <template v-if="type_id==3">
          <div class="item_div" v-for="(item, index) in list" :key="index" @click="toGx(item.id)">
            <div class="item_img_div">
              <img class="item_img" v-if="!item.isErr&&item.imgs" @error="item.isErr=true;$forceUpdate()" :src="item.imgs.split(',')[0]" alt="加载错误" />
              <img class="item_img" v-else src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/bgbgbg.png" />
            </div>
            <div class="item_title">{{ item.title }}</div>
            <div class="item_desc text_line">
              {{ item.desc }}
            </div>
          </div>
        </template>
      </waterfall>
    </van-list>
  </div>

  <Tabbar :current="0" />
</div>
</template>
<script>
import { xuqiu,GetChainLevelList ,project , news ,xiangxian ,qijiPro,setting,company,park,common} from '@/api/api'
import wx from 'weixin-js-sdk'; // 引入wxjs
import Tabbar from '@/components/Tabbar.vue'
import EndList from '@/components/EndList.vue'
import xsList from '@/components/xsList.vue'

import img1 from '@/assets/img/home/menu_icon1.png'
import img2 from '@/assets/img/home/menu_icon2.png'
import img3 from '@/assets/img/home/menu_icon3.png'
import img4 from '@/assets/img/home/menu_icon4.png'
import img5 from '@/assets/img/home/menu_icon5.png'
import img6 from '@/assets/img/home/menu_icon6.png'
import img7 from '@/assets/img/home/menu_icon7.png'
import img8 from '@/assets/img/home/menu_icon8.png'

import SwiperCore, {Autoplay,Pagination,Navigation} from 'swiper';
SwiperCore.use([Autoplay, Pagination, Navigation]);
export default {
  data(){
    return{
      swiperOptions: {
        slidesPerView: 1,//显示个数
        reversDirection:true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        freeMode: true,
        speed:500,
        loop:false,
      },

      menuList: [
        {name:'概况',img:img1,url:'gkPage'},
        {name:'链商',img:img2,url:'chainList'},
        // {name:'推商',img:img3,url:'companyList'},
        {name:'乡贤',img:img4,url:'xiangxian'},
        {name:'推商',img:img3,url:'projectList1'},
        {name:'选商',img:img5,url:'jdReport'},
        {name:'会商',img:img6,url:'huiyiPage'},
        {name:'营商',img:img7,url:'yingshang'},
        {name:'电商',img:img8,url:'productHome'},
      ],

      typeList: [
        {name:'招商载体',id:'1'},
        {name:'投资项目',id:'2'},
        {name:'供需对接',id:'3'},
      ],
      type_id: '1',
      type_id1:'xs1',
      typeList1:[
        // {name:'落地线索',id:'xs2'},
        {name:'投资线索',id:'xs1'},
        {name:'平台线索',id:'xs3'},
        {name:'网络线索',id:'xs'},
        
      ],
      page: 1,
      total: 0,
      isfinish: false,
      isLoad: true,
      list: [],
      chainList: [],
      newsList:[],
      xxList: [],
      xxTotal: 0,
      gg: [],
      comList: [],
      comTotal: 0,
    }
  },
  components:{
    Tabbar,
    EndList,
    xsList
  },
  watch:{
    type_id1: function () {
      this.init()
      this.$refs.list_div.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });  
    }
  },
  async created() {
    if (!sessionStorage.chainList) {
      GetChainLevelList().then(res => {
        sessionStorage.chainList = JSON.stringify(res.data.data)
        this.chainList = res.data.data
      })
    } else {
      this.chainList = JSON.parse(sessionStorage.chainList)
    }
    news.getList({city_id:2380}).then(res => {
      this.newsList = res.data.data
    })
    // xiangxian.getList().then(res => {
    //   this.xxList = res.data.data
    //   this.xxTotal = res.data.total
    // })
    company.getList({city_id:sessionStorage.city_id,label_id:50150}).then(res => {
      this.comList = res.data.data
      this.comTotal = res.data.total
    })
    setting.gg().then(res => {
      this.gg = res.data.data
      console.log(res.data.data)

    })
    
    this.init()
  },
  mounted(){
    
  },
  methods: {
    toXxDetail(id) {
      this.$router.push({name:'xiangxianDetail',query:{id}})
    },
    toComDetail(identification) {
      this.$router.push({name:'companyDetail',query:{identification}})
    },
    toNewsDetail(id) {
      this.$router.push({name:'newsDetail',query:{id}})
    },
    changeType(id) { 
      this.type_id = id
      this.init()
      this.$refs.list_div.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });  
    },
    init() {
      this.page = 1
      this.isfinish = false
      this.isLoad = true
      this.list = []
      this.getList()
      this.getShareInfo()
    },
    getMore() {
      if (this.isfinish||this.list.length==0) {
        return
      }
      this.page++
      this.getList()
    },
    getList() {
      let data = {
        page: this.page,
      }
      let type = this.type_id
      let api
      if (this.type_id == 1) {
        api = park.getList({...data,city_id:2380})
      } else if(this.type_id==2) {
        if(this.type_id1=='xs1'){
          api = qijiPro.getList({...data,status:1})
        } else if (this.type_id1 == 'xs2') {
          
        }else if(this.type_id1=='xs'){
          api = news.getList({...data,type_ids:'110,111,112,113,114,115,116,118,123'})
        }else if(this.type_id1=='xs3'){
          api = news.getList({...data,type_ids:'122'})
        }
      } else {
        api = xuqiu.getList(data)
      }
      // this.type_id == 2 ? project.getList(data) :
      api.then(res => {
        this.isLoad = false
        if (type == this.type_id) {
          this.list.push(...res.data.data)
          this.total = res.data.total
          if (this.list.length >= this.total) {
            this.isfinish = true
          }
        }
      })
    },
    toList() {
      if (this.type_id == 2) {
        this.$router.push('projectList')
      } else if (this.type_id == 3){
        this.$router.push('gongxuList')
      }
    },
    toPage(url) {
      this.$router.push(url)
    },
    toPark(id) {
      this.$router.push({
        path: '/parkDetail',
        query: {
          id: id,
          chain_id: this.id
        }
      })
    },
    getShareInfo() {
      let url = window.location.href
      common.getJssdk({url:btoa(url)}).then(res => {
        const config = res.data;
        wx.config({
          debug:false,
          appId: config.appId,  // appID 公众号的唯一标识
          timestamp: config.timestamp, // 生成签名的时间戳
          nonceStr: config.nonceStr, //  生成签名的随机串
          signature: config.signature, // 生成的签名
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
          ]
        });

        wx.ready(() => {
          var shareData = {
            title: '一码投成武',
            desc: '成武新韵，活力之城邀您携手同行',
            link: window.location.href,
            imgUrl:'https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/cwh5/video/cwlogo.png'
          };
          //点击要去分享
          wx.updateAppMessageShareData(shareData);
          wx.updateTimelineShareData(shareData);
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareAppMessage(shareData);
          wx.onMenuShareQQ(shareData);
          wx.onMenuShareWeibo(shareData);
          wx.onMenuShareQZone(shareData);
        });
      });
    },
    toPro(id) {
      this.$router.push({name:'projectDetail',query:{id}})
    },
    toGx(id) {
      this.$router.push({name:'gongxuDetail',query:{id}})
    },
    toChain(id) {
      this.$router.push({
        name: 'chainDetail',
        query: {
          id
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>

.swiper-container {
  width:calc(100% - 20px);
  margin: 15px 10px 20px;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  .swiper-slide {
    // height: 155px;
    border-radius: 5px;
    overflow: hidden;
  }  
  .video{
      display: block;
    }
  .swiper_img{
    // height: 155px;
    img{
      display: block;
    }
  
  }
}

.home{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .top_div{
    width: 100%;
    background: linear-gradient(180deg, #F9EFDE 0%, rgba(255,254,253,0.6) 100%);
    .logo{
      height: 35px;
      margin-right: 6px;
      margin-left: 10px;
    }
    .logo_title{
      font-size: 20px;
      color: #000000;
    }
    .logo_desc{
      font-size: 8px;
      color: #000000;
    }
    .zs_div{
      height: 30px;
      border-radius: 15px;
      padding: 0px 10px;
      background: #FFFFFF;
      border-radius: 15px;
      margin-right: 10px;
      img{
        width: 17px;
        height: 17px;
        margin-right: 6px;
      }
      .zs_name{
        font-size: 13px;
        color: #000000;
      }
    }
    .top_search{
      height: 40px;
      background: #FFFFFF;
      border-radius: 7px;
      margin: 15px 10px 0px 10px;
      padding: 0px 15px;
      font-size: 13px;
      color: #999999;
      img{
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
    }
  }
}

.item_div{
  background: #FFFFFF;
  box-shadow: 0px 2px 8px 2px rgba(250,135,30,0.13);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  margin: 10px 5px;
  .item_img_div{
    width: 100%;
    position: relative;
    .item_address{
      position: absolute;
      bottom: 10px;
      left: 10px;
      height: 20px;
      border-radius: 10px;
      background: #00000088;
      color: #fff;
      font-size: 10px;
      max-width: calc(100% - 20px);
      img{
        max-width: 8px;
        min-width: 8px;
        height: 10px;
        margin-left: 8px;
        margin-right: 5px;
      }
      .item_address_text{
        width: calc(100% - 22px);
      }
    }
    .item_img{
      width: 100%;
      display: block;
      height: auto !important;
    }
  }
  .right_top{
    position: absolute;
    right:0px;
    top:0px;
    width: 40px;
    height: 18px;
    background: linear-gradient(-60deg, #F8C569, #EB7418);
    border-radius: 0px 3px 0px 3px;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
    color: #fff;
  }
  .item_title{
    font-size: 14px;
    color: #333333;
    width: calc(100% - 20px);
    margin: 10px 10px 5px 10px;
  }
  .item_desc{
    width: calc(100% - 20px);
    font-size: 10px;
    color: #999999;
    margin: 0px 10px 10px 10px;

  }
}

.menu_div{
  .menu_item{
    width: 25%;
    text-align: center;
    font-size: 13px;
    color: #000000;
    margin-bottom: 20px;
    img{
      width: 44px;
      height: 44px;
      margin: 0 auto 6px;
      display: block;
    }
  }
}

.newsList{
	position: relative;
	background: #FFFFFF;
  box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.13);
  border-radius: 3px;
	padding: 6px 10px;
	width: calc(100% - 40px);
  margin: 5px 10px 10px;
	.left_img{
		width: 46px;
		height: 48px;
		margin-right: 5px;
    position: relative;
    top: 2px;
	}
	.line{
		width: 1px;
		height: 35px;
		background: #000000;
		opacity: 0.06;
    margin-right: 5px;
	}
	.newsC{
		width: calc(100% - 60px);
		.news_item{
			.news_i_type{
				width: 30px;
				height: 15px;
				background: #FFFFFF;
				box-shadow: 4px 5px 10px 0px rgba(203,203,203,0.34);
				border-radius:3px;
				font-size: 11px;
				line-height: 15px;
				text-align: center;
				margin-right: 6px;
			}
			.news_i_type1{
				color: #D33228;
			}
			.news_i_type2{
				color: #206CFF;
			}
			.news_i_title{
				width: calc(100% - 38px);
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 12px;
				color: #676767;
			}
		}
	}
}

.box_div{
  margin: 0 10px 10px;
  padding: 10px;
  background: #FFFFFF;
  box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.13);
  border-radius: 4px 4px 4px 4px;
  .shu{
    width: 3px;
    height: 16px;
    background: #FA871E;
    border-radius: 2px;
    margin-right: 5px;
  }
  .box_title{
    font-weight: bold;
    font-size: 16px;
    color: #FA871E;
    margin-right: auto;
    span{
      font-size: 11px;
      font-weight: 500;
    }
  }
  .box_more{
    color: #676767;
    font-size: 12px;
  }
  .box_item{
    width: 100px;
    padding-bottom: 10px;
    .box_img{
      width: 100px;
      height: 100px;
      position: relative;
      img{
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
      .box_add{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #0008;
        border-radius: 0 0 3px 3px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #FFFFFF;
      }
    }
    .box_name{
      margin-top: 10px;
      text-align: center;
      font-size: 14px;
      color: #000000;
      line-height: 20px;
    }
    .box_desc{
      font-size: 11px;
      color: #808080;
      line-height: 17px;
      text-align: center;
      margin-top: 5px;
    }
  }
  &::v-deep .van-swipe__indicators{
    bottom: 0px;
    .van-swipe__indicator{
      width: 6px;
      height: 2px;
      background: #cacfd5;
      border-radius: 1px;
    }
    .van-swipe__indicator--active{
      background: #FA871E;
    }
  }
}
.box_div1{
  margin: 0 10px 10px;
  background: #FFFFFF;
  box-shadow: 0px 3px 9px 2px rgba(250,135,30,0.13);
  border-radius: 4px 4px 4px 4px;
  min-height: 100%;
  .box_type{
    height: 40px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding-left: 10px;
    .type_item{
      font-size: 15px;
      color: #000000;
      margin-right: 20px;
      position: relative;
    }
    .type_item_a{
      font-weight: bold;
      font-size: 18px;
      color: #FA871E;
      &::after{
        content: '';
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        height: 6px;
        background: linear-gradient(90deg,#EB741800, #EB741888);
        border-radius: 1px;
      }
    }
  }
}

.chain_item{
  width: 25%;
  text-align: center;
  margin-bottom: 15px;
  img{
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }
  .chain_name{
    font-size: 13px;
    color: #333333;
  }
}

  .box_more{
    color: #676767;
    font-size: 12px;
  }

.new_type_div{
	width:calc(100% - 10px);
	padding-left: 10px;
	overflow-x: auto;
	white-space: nowrap;
	padding-top: 5px;
	padding-bottom: 10px;
	background: #fff;
	height:25px;
  position: sticky;
  top: 39px;
  z-index: 10;
	.news_type_item{
		display: inline-block;
		height: 23px;
		line-height: 23px;
		min-width:25px;
		text-align: center;
		padding:0 10px;
		border-radius: 22px;
		font-size: 11px;
		background: #F5F5F5;
		color: #000000;
		margin-right:20px;
	}
	.news_type_active{
		background: #138AF222;
		color: #138AF2;
	}
}
.zsdt_more {
  width: 20px;
  padding: 0 10px;
  height: 20px;
}
</style>

